<template>
  <div style=" position:relative;width:700px" id="drawCoupon">
    <Table  width="100%" :columns="columns" :data="value">
      <template slot-scope="{ row }" slot="promotionAmount">
        {{ (row.refType === 1 ? Number(row.promotionAmount) * 1000 / 100 : row.promotionAmount) + (row.refType === 0 ? '元' : row.refType === 1 ? '折' : '枚') }}
      </template>
      <template slot-scope="{ row }" slot="couponType">
        {{ getEnumsName(row.refType, couponTypeList) }}
      </template>
      <template slot-scope="{ row }" slot="validTime">
        {{ row.expirationType ? (row.startTime + '至' + row.endTime) : (row.dayNum + '天') }}
      </template>
      <template slot-scope="{ row }" slot="channel">
        {{ row.channel | getChannelsName }}
      </template>
    </Table>
    <Icon type="ios-add-circle" size="24" color="#2D8CF0" class="coupon-addicon" @click= "showDrawer" />
    <div>
    <Icon type="md-trash" size="24"  color="#808695" class="coupon-removeicon" @click="removeItem(index)" v-for="(item, index) in value.length" :key="index" :style="{'top': (2 + 48 * (index + 1)) + 'px'}" />
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import enumsMixin from '@/view/market/enums.js'
let that
export default {
  name: 'SelectCoupon',
  mixins: [enumsMixin],
  data () {
    return {
      couponName: '',
      searchObj: {
        couponName: '',
        couponType: -1
      },
      columns: [
        {
          title: '优惠券名称',
          width: 150,
          key: 'refName'
        },
        {
          title: '面额',
          slot: 'promotionAmount'
        },
        {
          title: '类型',
          slot: 'couponType'
        },
        {
          title: '有效期',
          width: 160,
          slot: 'validTime'
        },
        {
          title: '可用渠道',
          width: 100,
          slot: 'channel'
        },
        {
          title: '最低使用金额(元)',
          width: 140,
          key: 'accumAmount'
        }
      ]
    }
  },
  props: {
    value: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    ...mapState({
      merchantId: state => state.user.merchantId
    })
  },
  beforeCreate: function () {
    that = this
  },
  filters: {
    getChannelsName (value) {
      if (value) {
        return value.map((value) => {
          const result = that.channelList.filter(item => +item['value'] === +value)
          return result[0] ? result[0]['label'] : ''
        }).join(',')
      }
      return ''
    }
  },
  watch: {
  },
  methods: {
    showDrawer () {
      this.$emit('addcoupon', true)
    },
    removeItem (index) {
      let newVal = this.value.filter((item, i) => i !== index)
      this.$emit('input', newVal)
    }
  }
}
</script>
<style>
#drawCoupon .ivu-table-cell {line-height: 1.5;}
</style>
<style lang='less' scoped>
  .coupon-addicon{ position:absolute;  right:-70px; top:50px; cursor: pointer; }
  .coupon-removeicon{ position:absolute; right:-40px; cursor: pointer;}
</style>
